<script setup lang="ts">
import {ref} from 'vue';
import {DevSelect} from "devecoui-plus";
import {getAgeList} from '@/mock';

const modelObj1 = ref<Record<string, any>>()
const modelObj2 = ref<Record<string, any>>()
const modelObj3 = ref<Record<string, any>>()


const options = ref<Record<string, any>[]>([])

/**
 * 获取接口返回的选项信息
 * @param val
 */
const optionsData = (val: Record<string, any>[]) => {
  options.value = val;
}

</script>

<template>
  <p>当前接口返回的选项信息: {{options}}</p>
  <el-card>
    <p>默认绑定对象时会绑定当前options中的所有参数: {{ modelObj1 }}</p>
    <dev-select @options-data="optionsData" v-model="modelObj1" :use-model-obj="true" option-value-key="value" :api="getAgeList" :use-api="true"/>
  </el-card>
  <el-card class="model-obj-card">
    <p>通过 obj-mapper 自定义绑定哪些值: {{ modelObj2 }}</p>
    <dev-select v-model="modelObj2" :use-model-obj="true" option-value-key="value" :obj-mapper="{value:'value'}" :api="getAgeList" :use-api="true"/>
  </el-card>
  <el-card class="model-obj-card">
    <p>通过 obj-mapper 自定义绑定哪些值并且修改绑定后对象中的key值: {{ modelObj3 }}</p>
    <dev-select v-model="modelObj3" option-value-key="id" :use-model-obj="true" :obj-mapper="{id:'value',genderText:'label'}" :api="getAgeList" :use-api="true"/>
  </el-card>
</template>

<style>
.model-obj-card {
  margin-top: 20px;
}
</style>
